/**
 * Created by 69466 on 2022/05/28.
 */
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  Dialog,
  Text,
  View,
  TextField,
} from 'react-native-ui-lib';
import {isIPhoneX} from '../../../configs/platform';
import {commonStyles} from '../../../configs/commonStyle';
import { getExtractCode } from '../../../net/transfer'
import { logger } from '../../../utils/util';

export default class ExtractedCodeDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      content: '',
      showHeader: true,
      title: '提示',
      errormsg: ''
    };
  }

  show = (title = '提示') => {
    this.setState({isOpen: true, title});
  };

  dismiss = () => {
    this.setState({isOpen: false});
  };

  handleConfirm = () => {
    this.setState({errormsg: ''})
    getExtractCode({code: this.state.content, showLoading: true}).then(res => {
      const {result} = res
      this.dismiss();
      this.props.callBack && this.props.callBack(result);
    }).catch(err => {
      logger(err)
      this.setState({errormsg: err.msg || '提取码有误，请重试'})
    })
  }

  renderPannableHeader = props => {
    const {title} = props;
    return (
      <View>
        <View margin-10 center>
          <Text style={{...commonStyles.text_black_18}}>{title}</Text>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };

  render() {
    const {isOpen, showHeader, title, errormsg} = this.state;
    const renderPannableHeader = showHeader
      ? this.renderPannableHeader
      : undefined;
    return (
      <Dialog
        migrate
        useSafeArea
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={'70%'}
        onDismiss={this.dismiss}
        renderPannableHeader={renderPannableHeader}
        pannableHeaderProps={{title}}>
        <View style={styles.textInput}>
          <TextField
              multiline
              hideUnderline
              maxLength={100}
              containerStyle={{flex: 1}}
              onChangeText={content => this.setState({content})}
              text14
              placeholder="请输入提取码..."/>
          <Text style={commonStyles.text_red}>{errormsg}</Text>
        </View>
        <View row style={{borderTopColor: '#eeeeee', borderTopWidth: 1}}>
          <Button
            flex
            background-white
            labelStyle={{color: '#666666'}}
            text14
            label={'取消'}
            onPress={() => {
              this.dismiss();
              this.props.cancalClick && this.props.cancalClick();
            }}
          />

          <View style={{backgroundColor: '#eeeeee', width: 1}} />
          <Button
            flex
            label={'确定'}
            background-white
            labelStyle={{color: '#F9D63B'}}
            text14
            onPress={this.handleConfirm}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: 'white',
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  textInput: {
    minHeight: 150,
    padding: 20,
    width: '80%'
  },
});
